import React from 'react';
import CommonList from '../../../../components/CommonLists/list';
import { Button, message, Switch, Tooltip } from 'antd';
import Modal from '../../../../components/Modal/index';
import services from '../../../../services/api';
import { ENABLE_STATUS, AUDIT } from '../../../../utils/constant';
import Status from '../../../../components/Status';

class NameList extends CommonList {
  constructor(props) {
    super(props);
    this.api = 'nameListDetail';
    this.editButton = record => {
      return (
        <Button
          size='small'
          type='link'
          onClick={this.edit.bind(this, record)}
          disabled={record.audit_status === this.AUDIT._WAIT}
        >
          编辑
        </Button>
      );
    };
    this.delButton = record => {
      return (
        <Button
          size='small'
          type='link'
          disabled={record.audit_status === this.AUDIT._WAIT}
          onClick={this.delete.bind(this, record)}
        >
          删除
        </Button>
      );
    };
    this.btnGroup = [this.editButton, this.delButton];
    if (props.onlyExport) {
      this.needOperateColumn = false;
    }
  }

  getColumn = () => {
    return [
      {
        title: '名单数据',
        key: 'data_content',
        dataIndex: 'data_content',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {record.type === 2 ? (
                <div className="overflowtext">
                  <Button type='link' onClick={() => this.props.showDetail(record)}>
                    {text}
                  </Button>
                </div>
              ) : (
                text
              )}
            </Tooltip>
          );
        }
      },
      !this.props.onlyExport
        ? {
            title: '有效期始',
            key: 'start_time',
            dataIndex: 'start_time',
            render: text => {
              return (
                <Tooltip title={text} placement='topLeft'>
                  <div className='overflowtext'>{text}</div>
                </Tooltip>
              );
            }
          }
        : false,
      !this.props.onlyExport
        ? {
            title: '有效期止',
            key: 'end_time',
            dataIndex: 'end_time',
            render: text => {
              return (
                <Tooltip title={text} placement='topLeft'>
                  <div className='overflowtext'>{text}</div>
                </Tooltip>
              );
            }
          }
        : false,
      {
        title: '备注',
        key: 'remark',
        dataIndex: 'remark',
        render: text => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        }
      },
      {
        title: '创建/修改人',
        key: 'create_user_name',
        dataIndex: 'create_user_name',
        render: (text, record) => {
          return (
            <Tooltip
              title={`${record.create_user_name}/${record.update_user_name}`}
              placement='topLeft'
            >{`${record.create_user_name}/${record.update_user_name}`}</Tooltip>
          );
        }
      },
      {
        title: '修改时间',
        key: 'update_time',
        dataIndex: 'update_time',
        render: text => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        }
      },
      !this.props.onlyExport
        ? {
            title: '审核情况',
            key: 'audit_label',
            dataIndex: 'audit_label',
            render: text => {
              return (
                <Tooltip title={text} placement='topLeft'>
                  <div className='overflowtext'>{text}</div>
                </Tooltip>
              );
            }
          }
        : false,
      {
        title: (
          <>
            {this.props.getFilterTitle(
              '状态',
              [
                {
                  value: -1,
                  name: '所有状态'
                },
                {
                  value: 1,
                  name: '启用'
                },
                {
                  value: 2,
                  name: '停用'
                }
              ],
              'status',
              this.refreshTableFilter,
              ['value', 'name']
            )}
          </>
        ),
        key: 'status',
        dataIndex: 'status',
        render: (text, record) => {
          return (
            <>
              {!this.props.onlyExport ? (
                <Switch
                  checked={record.status === ENABLE_STATUS._TRUE || record.status === true}
                  disabled={record.audit_status === AUDIT._WAIT}
                  onChange={param => {
                    this.props.statusChange(param, record);
                  }}
                />
              ) : (
                <Status value={text} />
              )}
            </>
          );
        },
        ellipsis: true,
        width: 100
      }
    ].filter(Boolean);
  };

  refreshTableFilter = params => {
    this.props.refreshTableFilter && this.props.refreshTableFilter(params);
  };

  delete(record) {
    Modal.open({
      title: '',
      isConfirm: true,
      width: '300px',
      content: '确定要删除?',
      isOkBtn: true,
      isCancelBtn: true,
      ok: () => {
        services[this.api].updateStatus(this.getDeleteParam(record)).then(data => {
          if (data.code === 0) {
            message.success(data.msg);
            this.props.queryList();
            Modal.close();
          } else {
            message.error(data.msg);
          }
        });
      },
      cancel: () => {
        Modal.close();
      }
    });
  }

  // 删除时的参数
  getDeleteParam = record => {
    return { name_list_data_ids: record.name_list_data_id, status: -2 };
  };

  componentDidMount() {}
}

export default NameList;
